<template>
  <div>
    <el-container>
      <el-header style="display: flex;justify-content: space-between;align-items: center;padding-left: 0px">
        <el-button @click="dialogVisible = true" icon="el-icon-plus" type="primary" size="mini">增加调薪</el-button>
        <div class="block" style="width: 50px; margin-left: -260px">
          <el-date-picker
            v-model="value"
            align="right"
            type="month"
            @change="searchByDate"
            value-format="yyyy-MM-dd"
            placeholder="请通过月份搜索..."
            size="mini">
          </el-date-picker>
        </div>
        <el-input
          placeholder="请通过员工姓名或者工号搜索..."
          clearable
          style="width: 250px;margin-right: 40px;padding: 0px;"
          size="mini"
          prefix-icon="el-icon-search"
          v-model="keywords">
        </el-input>
        <el-button @click="" icon="el-icon-search" style="margin-left: -350px"
                   type="primary" size="mini"
                   @click="searchSalary">搜索员工</el-button>
        <el-button size="mini" type="success" @click="loadSalaryCfg" icon="el-icon-refresh">刷新数据</el-button>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-table
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{textAlign: 'center'}"
            :data="salaries"
            stripe
            v-loading="tableLoading"
            size="mini"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="30">
            </el-table-column>
            <el-table-column
              width="120"
              prop="workID"
              label="员工工号">
            </el-table-column>
            <el-table-column
              width="120"
              prop="empName"
              label="员工姓名">
            </el-table-column>
            <el-table-column
              width="100"
              label="调薪日期">
              <template slot-scope="scope">{{ scope.row.asDate | formatDate}}</template>
            </el-table-column>
            <el-table-column
              width="70"
              prop="beforeSalary"
              label="调前薪资">
            </el-table-column>
            <el-table-column
              width="70"
              prop="afterSalary"
              label="调后薪资">
            </el-table-column>
            <el-table-column
              width="300"
              prop="reason"
              label="调薪原因">
            </el-table-column>
            <el-table-column
              prop="remark"
              width="300"
              label="备注">
            </el-table-column>

            <el-table-column label="操作" align="center">
              <el-table-column label="编辑" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="删除" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex;justify-content: space-between;text-align: left;margin-top: 10px" v-if="salaries!=0">
          <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="multipleSelection.length==0" @click="deleteAll">批量删除
          </el-button>
          <el-pagination
            background
            @size-change="sizeChange"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <div style="text-align: left">
      <el-dialog
        title="添加调薪"
        :visible.sync="dialogVisible"
        width="50%"
        @close="emptySalary"
        :close-on-click-modal="false">
        <div style="display: flex;justify-content: flex-start;">
          <el-steps :active="index" direction="vertical">
            <el-step title="员工工号" size="mini"></el-step>
            <el-step title="员工姓名" size="mini"></el-step>
            <el-step title="调薪日期"></el-step>
            <el-step title="调前薪资"></el-step>
            <el-step title="调后薪资"></el-step>
            <el-step title="调薪原因"></el-step>
            <el-step title="备注"></el-step>
          </el-steps>
          <div style="margin-left: 30px;display: flex;justify-content: center;align-items: center;width: 80%;">
            <div v-show="index==0">
              员工工号：
              <el-input
                placeholder="请输入员工工号..."
                size="mini"
                style="width: 200px"
                type="number"
                @keyup.enter.native="next"
                v-model="salary.eid">
              </el-input>
            </div>
            <div v-show="index==1">
              员工姓名：
              <el-input
                placeholder="请输入员工姓名..."
                size="mini"
                style="width: 200px"
                type="text"
                @keyup.enter.native="next"
                v-model="salary.empName">
              </el-input>
            </div>
            <div v-show="index==2">
              调薪日期：
              <el-date-picker
                v-model="salary.asDate"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                style="width: 200px;"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div v-show="index==3">
              调前薪资：
              <el-input
                placeholder="请输入调前薪资..."
                @keyup.enter.native="next"
                size="mini"
                style="width: 200px"
                disabled
                type="number"
                v-model="salary.beforeSalary">
              </el-input>
            </div>
            <div v-show="index==4">
              调后薪资：
              <el-input
                placeholder="请输入调后薪资..."
                @keyup.enter.native="next"
                size="mini"
                style="width: 200px"
                type="number"
                v-model="salary.afterSalary">
              </el-input>
            </div>
            <div v-show="index==5">
              调薪原因：
              <el-input
                placeholder="请输入调薪原因..."
                size="mini"
                @keyup.enter.native="next"
                style="width: 200px"
                type="textarea"
                v-model="salary.reason">
              </el-input>
            </div>
            <div v-show="index==6">
              备注：
              <el-input
                placeholder="请输入备注..."
                size="mini"
                @keyup.enter.native="next"
                style="width: 200px"
                type="textarea"
                v-model="salary.remark">
              </el-input>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: center;padding: 8px;margin: 0px;">
          <el-button round size="mini" v-if="index!==0" @click="index--">上一步</el-button>
          <el-button type="primary" round size="mini" @click="next" v-text="index==6?'完成':'下一步'"></el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tableLoading: false,
        index: 0,
        totalCount: -1,
        pageSize: 10,
        currentPage: 1,
        value: '',
        keywords: '',
        salaries: [],
        multipleSelection: [],
        salary: {
          id: '',
          eid:'',
          workID:'',
          empName:'',
          asDate:'',
          beforeSalary:'',
          afterSalary:'',
          reason:'',
          remark:''
        },
        monthSalary: '',
        allSalary: {
          id: '',
          eid:'',
          empName:'',
          monthSalary:'',
        }
      };
    },
    methods: {
      // 时间格式转换
      dateFormat(dateData) {
        var date = new Date(dateData)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        const time = y + '-' + m + '-' + d
        return time
      },
      deleteAll(){
        this.$confirm('删除' + this.multipleSelection.length + '条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          this.multipleSelection.forEach(row=> {
            ids = ids + row.id + ",";
          })
          this.doDelete(ids);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        this.dialogVisible = true;
        row.asDate = new Date(row.asDate);
        this.salary = row;
      },
      handleDelete(index, row) {
        this.$confirm('删除[' + row.empName + ']的调薪记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      doDelete(id){
        var _this = this;
        _this.tableLoading = true;
        this.deleteRequest("/personnel/adjust/salary/" + id).then(resp=>{
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;

            _this.loadSalaryCfg();
          }
        });
      },
      next(){
        var _this = this;
        this.dateFormat(this.salary.asDate);
        if (this.index === 2) {
          this.getRequest("/personnel/adjust/getmonthsalary?eid=" + _this.salary.eid + "&empName=" + _this.salary.empName).then(resp=> {
            _this.tableLoading = false;
            if (resp && resp.status === 200) {
              if (this.salary.beforeSalary === '') {
                this.salary.beforeSalary = resp.data.obj;
              }
              console.log('success');
            }
          });
        }
        if (this.index === 6) {
          if(this.salary.eid&&this.salary.empName&&this.salary.asDate&&this.salary.beforeSalary&&this.salary.afterSalary&&this.salary.reason&&this.salary.remark){
            if (this.salary.id) {//更新
              _this.tableLoading = true;
              this.putRequest("/personnel/adjust/salary", this.salary).then(resp=> {
                _this.tableLoading = false;
                if (resp && resp.status === 200) {
                  _this.dialogVisible = false;
                  _this.index = 0;
                  _this.loadSalaryCfg();
                }
              });
            } else {//添加
                this.postRequest("/personnel/adjust/salary", this.salary).then(resp=> {
                  if (resp && resp.status === 200) {
                    _this.dialogVisible = false;
                    _this.index = 0;
                    _this.loadSalaryCfg();
                  }
                });
            }
            this.allSalary.eid = this.salary.eid;
            this.allSalary.empName = this.salary.empName;
            this.allSalary.monthSalary = this.salary.afterSalary;
            this.putRequest("/personnel/adjust/salary/add", this.allSalary).then(resp=> {
              if (resp && resp.status === 200) {
                console.log('success')
              }
            });
          }else{
            this.$message({type: 'error', message: '字段不能为空!'});
          }
        } else {
          this.index++;
        }
      },
      sizeChange(size) {
        this.pageSize=size;
        this.loadSalaryCfg();
      },
      //分页操作
      currentChange(page){
        this.currentPage = page;
        this.loadSalaryCfg();
      },
      //根据时间筛选调薪记录
      searchByDate(){
        var _this = this;
        if (this.value !== null) {
          this.getRequest("/personnel/adjust/salary/month/" + this.value + "?page=" + this.currentPage + "&size=" + this.pageSize).then(resp=> {
            this.tableLoading = false;
            if (resp && resp.status === 200) {
              // var data = resp.data;
              // _this.trains = data.trains;
              _this.salaries = resp.data.data;
              _this.totalCount = resp.data.total;
            }
          })
        }
        else {
          this.loadSalaryCfg();
        }
      },
      // 查找调薪记录
      searchSalary() {
        var _this = this;
        this.tableLoading = true;
        // console.log(this.keywords);
        if (this.keywords === '' || this.keywords == null) {
          this.loadSalaryCfg();
        }
        else {
          this.getRequest("/personnel/adjust/salary/keywords/" + this.keywords + "?page=" + this.currentPage + "&size=" + this.pageSize).then(resp=> {
            this.tableLoading = false;
            if (resp && resp.status === 200) {
              // var data = resp.data;
              // _this.trains = data.trains;
              _this.salaries = resp.data.data;
              _this.totalCount = resp.data.total;
            }
          })
        }
      },
      loadSalaryCfg(){
        this.tableLoading = true;
        var _this = this;
        this.getRequest("/personnel/adjust/salary/getall" + "?page=" + this.currentPage + "&size=" + this.pageSize).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status === 200) {
            _this.salaries = resp.data.data;
            _this.totalCount = resp.data.total;
          }
        })
      },
      emptySalary(){
        this.salary = {
          id: '',
          eid:'',
          empName: '',
          asDate:'',
          beforeSalary:'',
          afterSalary:'',
          reason:'',
          remark:''
        };
        this.index = 0;
      }
    },
    mounted: function () {
      this.loadSalaryCfg();
    }
  };
</script>
<style>
  .el-dialog__body {
    padding-bottom: 10px;
  }
</style>
